<!-- 检测者列表 -->

<!-- 指标异常 -->
<div class="layuimini-container">

	<div class="layuimini-main" style="margin: 10px;padding:10px;">
		<form class="layui-form" action="">
			<div class="layui-inline">
				<label class="layui-form-label"> 所属总店</label>
				<div class="layui-input-inline">
					<select name="headStore" id="headStore" lay-filter="headStore">
						<option value="">请选择</option>
					</select>
				</div>
			</div>

			<div class="layui-inline">
				<label class="layui-form-label"> 所属分店</label>
				<div class="layui-input-inline">
					<select name="subStore" id="subStore" lay-filter="subStore">
						<option value="">请选择</option>
					</select>
				</div>
			</div>

			<div class="layui-inline">
				<label class="layui-form-label">筛选时期</label>
				<div class="layui-input-inline">
					<input class="layui-input" placeholder="某年某月" name="time" id="time" autocomplete="off" />
				</div>
			</div>

			<!-- 搜索按钮 -->
			<div class="layui-inline">
				<button type="submit" id="search" class="layui-btn layui-btn-normal" lay-submit lay-filter="data-search-btn"><i
					 class="fa fa-search"></i> 查询 </button>
				<button type="submit" id="reset" class="layui-btn layui-btn-normal"><i class="fa fa-bar-chart"></i> 导出报表 </button>
			</div>
		</form>
	</div>


	<!-- 图形报表 -->
	<div class="layuimini-main" style="margin: 10px;padding:10px;">
		<h2 align="center" id="zxc">
			</h3>


			<!--简洁选项卡-->
			<div class="layui-card-body">

				<div class="layui-tab layui-tab-brief" lay-filter="component-tabs-brief">
					<!-- 选项卡 -->
					<ul class="layui-tab-title">
						<li class="layui-this">服务人群画像</li>
						<li>检测排名</li>
						<li>指标异常数据统计</li>
						<li>指标异常人群分布</li>
					</ul>

					<div class="layui-tab-content">
						<br />

						<!-- 1.服务人群画像 -->
						<div class="layui-tab-item layui-show">
							<div>
								<font style="font-size: 16px;" id="xcv"></font>
							</div>
							<!--服务人群画像折线图-->
							<div id="fenxi" style="width: 80%; height: 600px; margin-left: 5%; margin-left:auto; margin-right:auto;"></div>
						</div>


						<!-- 2.检测排名 -->
						<div class="layui-tab-item">
							<div>
								<font style="font-size: 16px;" id="jclMax"></font>
							</div>
							<!--检测量最大单店-->
							<table class="layui-hide" id="table-max-jcl"></table>

							<br />

							<div>
								<font style="font-size: 16px;" id="ycMax"></font>
							</div>
							<!-- 异常率最高单店 -->
							<table class="layui-hide" id="table-max-ycl"></table>
						</div>


						<!-- 3.指标异常数据统计 -->
						<div class="layui-tab-item">
							<div>
								<font style="font-size: 16px;">检测指标异常数据统计表：</font>
							</div>
							<!--检测指标异常数据统计表-->
							<table class="layui-hide" id="table-count-zbyc"></table>
						</div>


						<!-- ４.指标异常人群分布 -->
						<div class="layui-tab-item">
							<div>
								<font style="font-size: 16px;">检测指标异常率人群分布统计表：</font>
							</div>
							<!--检测指标异常率人群分布统计表-->
							<table class="layui-hide" id="table-count-zbycfb"></table>
						</div>
					</div>
				</div>
			</div>

	</div>
</div>


<script src="lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
<script src="lib/jq-module/paigusu.min.js" charset="utf-8"></script>
<script src="js/lay-module/echarts/echarts.js"></script>
<script type="text/javascript">
	function getCountDays(result) {
		var time = [];
		var curDate = new Date(result.time);
		// 获取当前月份
		var curMonth = curDate.getMonth();
		// 实际月份比curMonth大1，下面将月份设置为下一个月
		curDate.setMonth(curMonth + 1);
		// 将日期设置为0，表示自动计算为上个月（这里指的是当前月份）的最后一天
		curDate.setDate(0);
		// 返回当前月份的天数
		for (var i = 0; i < curDate.getDate(); i++) {
			time[i] = (i + 1);
		}
		return time;
	}
	
	function monthData(){
		var data="";
		var myDate = new Date();
		var myMonth=myDate.getMonth();
		var monthData=(myMonth+1);
		if(monthData<10){
			data+=myDate.getFullYear()+'-0'+monthData;
		}else{
			data+=myDate.getFullYear()+'-'+monthData;
		}
		return data;
	}

	function getDay(obj, result) {
		var dayData = getCountDays(obj);
		var testObj = new Array();
		for (var i = 0; i < dayData.length; i++) {
			for (var j = 0; j < result.length; j++) {
				var curDate = new Date(result[j].time);
				var dayDate = curDate.getDate();
				if (dayData[i] == dayDate) {
					var total = result[j].total;
					if (i == 0) {
						testObj.push(total);
					}
					testObj[i] = total;
				} else if (dayData[i] != dayDate) {
					testObj.push(0);
				}
			}
		}
		return testObj;
	}

	function init(obj) {
		$.ajax({
			url: 'http://localhost:8004/sccMedicalResult/total',
			type: 'get',
			async: false,
			data: {
				"data": JSON.stringify(obj)
			},
			success: function(result) {
				if (result.success) {
					var data = result.data;
					initFenxi(obj, data);
				}
			}
		});
	}

	function getMax(data) {
		var max = data[0].total;
		for (var i = 0; i < data.length; i++) {
			if (data[i].total > max) {
				max = data[i].total;
			}
		}
		return max + 2;
	}

	function initFenxi(obj, data) {
		var fenxi = echarts.init(document.getElementById('fenxi'), 'infographic');
		option = {
			xAxis: {
				type: 'category',
				boundaryGap: false,
				data: getCountDays(obj)
			},
			yAxis: {
				type: 'value',
				max: getMax(data)
			},
			series: [{
				data: getDay(obj, data),
				type: 'line',
				smooth: true
			}]
		};

		<!--使用指定的配置项和数据显示图表-->
		fenxi.setOption(option);
	}
</script>
<script>
	//引用
	layui.use(['form', 'table', 'miniPage', 'element', 'layer', 'layarea', 'laydate'], function() {
		//初始化声明
		var $ = layui.jquery,
			form = layui.form, //将layui中的form组件对象定义成form
			table = layui.table,
			miniPage = layui.miniPage,
			layer = layui.layer,
			layarea = layui.layarea,
			laydate = layui.laydate;

		//渲染form表单
		form.render();

		//日期
		laydate.render({
			elem: '#time',
			type: 'month'
		});

		form.on('select(headStore)', function(data) {
			var str = document.getElementById("headStore").value;
			if (str != "") {
				$.ajax({
					url: 'http://localhost:8004/sccPatient/subStore',
					type: 'get',
					async: false,
					data: {
						"mainStoreCode": str
					},
					success: function(result) {
						var data = result.data;
						var subStore = document.getElementById("subStore");
						for (var i = 0; i < data.length; i++) {
							var option = document.createElement("option");
							option.setAttribute("value", data[i].storeCode);
							option.innerText = data[i].storeName;
							subStore.appendChild(option);
						}
						form.render("select");
					}
				});
			}
		});
		layer.ready(function() {
			$.ajax({
				url: 'http://localhost:8004/sccPatient/mainStore',
				type: 'get',
				async: false,
				success: function(result) {
					var data = result.data;
					var headStore = document.getElementById("headStore");
					for (var i = 0; i < data.length; i++) {
						var option = document.createElement("option");
						option.setAttribute("value", data[i].storeCode);
						option.innerText = data[i].storeName;
						headStore.appendChild(option);
					}
					form.render("select");
				}
			});
		});

		//检测排名:检测量最大单店
		table.render({
			elem: '#table-max-jcl',
			url: 'http://localhost:8004/sccMedicalResult/ranking',
			cols: [
				[{
						type: 'numbers',
						title: '排名',
						align: 'center',
						width: 100
					},
					{
						field: 'mainStore',
						title: '总店名称',
						align: 'center'
					},
					{
						field: 'subStore',
						title: '分店名称',
						align: 'center'
					},
					{
						field: 'countTest',
						title: '检测量',
						align: 'center',
						sort: true
					}
				]
			],
			done: function(value, date, endDate) {
				var data = value.data;
				if (data.length > 0) {
					document.getElementById("jclMax").innerText = "检测量最大单店：" + data[0].subStore + " 检测量共计" + data[0].countTest +
						"次";
				}
				// console.log(value); //得到日期生成的值，如：2017-08-18
				// console.log(date); //得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
				// console.log(endDate); //得结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上。
			}
		});


		//检测排名:异常率最高单店
		table.render({
			elem: '#table-max-ycl',
			url: 'http://localhost:8004/sccMedicalResult/yc',
			cols: [
				[{
						type: 'numbers',
						title: '排名',
						align: 'center',
						width: 100
					},
					{
						field: 'mainStore',
						title: '总店名称',
						align: 'center'
					},
					{
						field: 'subStore',
						title: '分店名称',
						align: 'center'
					},
					{
						field: 'fwNumber',
						title: '服务人数',
						align: 'center'
					},
					{
						field: 'zbycNumber',
						title: '指标异常人数',
						align: 'center'
					},
					{
						field: 'zbycResolution',
						title: '指标异常率',
						align: 'center',
						sort: true
					}
				]
			],
			done: function(value, date, endDate) {
				var data = value.data;
				if (data.length > 0) {
					document.getElementById("ycMax").innerText = "异常率最高单店：" + data[0].subStore + " 所有指标异常率：" + data[0].zbycResolution;
				}
				// console.log(value); //得到日期生成的值，如：2017-08-18
				// console.log(date); //得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
				// console.log(endDate); //得结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上。
			}
		});

		//指标异常数据统计
		table.render({
			elem: '#table-count-zbyc',
			url: 'http://localhost:8004/sccMedicalResult/ycStatistics',
			cols: [
				[{
						field: 'medicalName',
						title: '指标',
						align: 'center'
					},
					{
						field: 'total',
						title: '检测人数',
						align: 'center',
						sort: true
					},
					{
						field: 'ycTotal',
						title: '异常人数',
						align: 'center',
						sort: true
					},
					{
						field: 'ycPercentage',
						title: '指标异常率',
						align: 'center',
						width: 180,
						sort: true
					},
					{
						field: 'lowTotal',
						title: '低于标准值人数',
						align: 'center',
						sort: true
					},
					{
						field: 'highTotal',
						title: '高于标准值人数',
						align: 'center',
						sort: true
					}
				]
			]
		});

		//检测指标异常率人群分布统计表
		table.render({
			elem: '#table-count-zbycfb',
			url: 'http://localhost:8004/sccMedicalResult/old',
			cols: [
				[{
						field: 'medicalName',
						title: '指标',
						align: 'center'
					},
					{
						field: 'lessThanTwentyYearsOldPercentage',
						title: '20岁以下',
						align: 'center',
						sort: true
					},
					{
						field: 'twentyToTwentyNineYearsOldPercentage',
						title: '20-29岁',
						align: 'center',
						sort: true
					},
					{
						field: 'thirtyToThirtyNineYearsOldPercentage',
						title: '30-39岁',
						align: 'center',
						sort: true
					},
					{
						field: 'fortyToFortyNineYearsOldPercentage',
						title: '40-49岁',
						align: 'center',
						sort: true
					},
					{
						field: 'fiftyToFiftyNineYearsOldPercentage',
						title: '50-59岁',
						align: 'center',
						sort: true
					},
					{
						field: 'sixtyToSixtyNineYearsOldPercentage',
						title: '60-69岁',
						align: 'center',
						sort: true
					},
					{
						field: 'overSeventyYearsOldPercentage',
						title: '70岁及以上',
						align: 'center',
						sort: true
					}
				]
			]
			// done: function(value, date, endDate) {
			// 	var data = value.data;
			// 	console.log(data);
			// 	// console.log(value); //得到日期生成的值，如：2017-08-18
			// 	// console.log(date); //得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
			// 	// console.log(endDate); //得结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上。
			// }
		});

		form.on('submit(data-search-btn)', function(data) {
			var result = data.field;
			console.log(result);
			echarts.init(document.getElementById('fenxi')).dispose();
			if (result.time == "") {
				layer.msg("请选择筛选时期");
				return false;
			}
			Date.prototype.toLocaleString = function() {
				undefined
				return this.getFullYear() + "年" + (this.getMonth() + 1) + "月";
			};
			var oldTime = (new Date(result.time)).getTime();
			var unixTimestamp = new Date(oldTime * 1);
			commonTime = unixTimestamp.toLocaleString();
			document.getElementById("zxc").innerText = commonTime + "份数据报表";
			document.getElementById("xcv").innerText = "每日检测人数变化曲线图:";
			init(result);
			table.reload('table-max-jcl', {
				where: { //条件
					data: JSON.stringify(result) //搜索条件
				}
			}, 'data');
			table.reload('table-max-ycl',{
				where:{
					data:JSON.stringify(result)
				}
			},'data');
			table.reload('table-count-zbyc',{
				where:{
					data:JSON.stringify(result)
				}
			},'data');
			table.reload('table-count-zbycfb',{
				where:{
					data:JSON.stringify(result)
				}
			},'data');
			return false;
		});
		
		layer.ready(function(){//初始化加载
			var data={};
		  	data.time=monthData();
			document.getElementById("zxc").innerText = data.time + "月份数据报表";
			document.getElementById("xcv").innerText = "每日检测人数变化曲线图:";
			console.log(data.time);
			init(data);
			table.reload('table-max-jcl', {
				where: { //条件
					data: JSON.stringify(data) //搜索条件
				}
			}, 'data');
			table.reload('table-max-ycl',{
				where:{
					data:JSON.stringify(data)
				}
			},'data');
			table.reload('table-count-zbyc',{
				where:{
					data:JSON.stringify(data)
				}
			},'data');
			table.reload('table-count-zbycfb',{
				where:{
					data:JSON.stringify(data)
				}
			},'data');
		});

	});
</script>


